<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>周边/交通</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/around.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="slider-container sc">
        <div id="slider-dom" class="slider-box">
        </div>
        <script id="slider" type="text/html">
            {{each pic}}
            <span data-index="{{ $index }}">
          {{each $value.pic}}
          <img src="{{$value}}"> {{/each}}
          </span> {{/each}}
        </script>
        <span class="pagination"></span>
        <div class="slider-label-container">
            <ul id="slider-label-dom" class="slider-label">
            </ul>
            <script id="slider-label" type="text/html">
                {{each pic}}
                <li><a data-index="{{ $index }}" class="{{ $index === 0 ? 'active' : '' }}" href="javascript:;">{{ $value.name }}</a></li>
                {{/each}}
            </script>
        </div>
        <div class="slider-label-mask"></div>
        <a class="btn btn-share bs" href="javascript:;">分享赚钱</a>
        <div class="share-mask"></div>
    </div>
    <div class="header-title">
        <span class="card-body-title"></span>
        <div class="card-body-subtitle">
            <span class="month-fee font-yellow"></span>
            <i class="icon icon-yen"></i>
            <a class="pay" href="javascript:;">付款优惠</a>
        </div>
        <div class="line-title">
            <div class="base-line"></div>
            <div class="base-info">基本信息</div>
        </div>
        <div id="base-dom" class="card-body"></div>
        <script id="base" type="text/html">
            <ul class="card-body-content">
                <li>{{ region_name }}</li>
                <li>{{ population }}</li>
                <li>{{ size }}㎡</li>
                <li class="last">{{ nums }}间在租</li>
            </ul>
            <div class="card-body-label">
                {{each configuration}}
                <label class="{{ $index | color }}">{{ $value }}</label> {{/each}}
            </div>
            <div class="divider"></div>
        </script>
        <ul id="nav-bar-dom" class="nav-bar yellow"></ul>
        <script id="nav-bar" type="text/html">
            <li><a href="house.html?id={{ id }}">你的小家</a></li>
            <li><a href="build.html?id={{ id }}">房间信息</a></li>
            <li class="last"><a class="active" href="javascript:;">周边/交通</a></li>
        </script>
    </div>
    <div id="map"></div>
    <div class="title-bar">
        <i class="icon icon-location-gray"></i>
        <span class="title-bar-title"></span>
        <button data-id="" class="btn yellow focus">+ 关注小区</button>
        <div class="title-bar-subtitle"></div>
        <!-- <button class="btn btn-default">西门</button> -->
        <!-- <button class="btn btn-default">北门</button> -->
        <!-- <button class="btn btn-default">东门</button> -->
    </div>
    <div class="convient">
        <div class="divider"></div>
    </div>
    <!-- <div class="search-bar">
        <a class="font-red" href="javascript:;">
            <i class="icon icon-search"></i> 搜周边
        </a>
        <a class="font-blue" href="javascript:;">
            <i class="icon icon-location-blue"></i> 导航
        </a>
    </div> -->
    <div class="convient">
        <div class="line-title">
            <div class="base-line"></div>
            <div class="base-info">你的小家</div>
        </div>
        <ul class="service-bar">
            <li class="service-bar-item">
                <a href="javascript:;">
                    <i class="icon icon-building"></i>
                    <span class="item-title">商业中心</span>
                </a>
            </li>
            <li class="service-bar-item">
                <a href="javascript:;">
                    <i class="icon icon-car"></i>
                    <span class="item-title">交通便利</span>
                </a>
            </li>
            <li class="service-bar-item">
                <a href="javascript:;">
                    <i class="icon icon-help"></i>
                    <span class="item-title">配套齐全</span>
                </a>
            </li>
            <li class="service-bar-item">
                <a href="javascript:;">
                    <i class="icon icon-anchor"></i>
                    <span class="item-title">生活便捷</span>
                </a>
            </li>
        </ul>
        <div class="divider"></div>
    </div>
    <div class="body-text">
        <p>
            <span class="convient-title">周边配套</span>
            <span class="convient-body"></span>
        </p>
        <p>
            <span class="convient-title">附近地铁</span>
            <span class="convient-body"></span>
        </p>
        <p>
            <span class="convient-title">附近公交</span>
            <span class="convient-body"></span>
        </p>
    </div>
    <div class="footer-padding"></div>
    <div class="tool-bar">
        <a class="favorite" href="javascript:;">
            <i class="icon icon-star-red-blank"></i>
        </a>
        <span class="separator"></span>
        <a id="phone" href="javascript:;">
            <i class="icon icon-phone"></i>
        </a>
        <span class="separator"></span>
        <a href="javascript:;" class="btn prepoint">预约看房</a>
        <a href="javascript:;" class="btn yellow checkin">立即入住</a>
    </div>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=f4a5386de1a049c7242c8c2a0a667bdd"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/dialog.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        var map = new AMap.Map('map', {
            resizeEnable: true,
            zoom: 12,
            center: [104.06, 30.64],
        });

        $(function() {
            $('body').on('click', '.prepoint, .checkin', function() {
                bee.open('build.html', {
                    id: bee.getQueryString('id')
                });
            });

            var n = 1;
            $('body').on('click', 'a.favorite', function(e) {
                var dom = $(this).find('.icon');
                if (dom.hasClass('icon-star-red-blank')) {
                    bee.request({
                        url: '/Member/Index/collection',
                        data: {
                            type: 1,
                            housing_id: bee.getQueryString('id'),
                        },
                        success: function(result) {
                            dom.removeClass('icon-star-red-blank').addClass('icon-star-red');
                        }
                    });
                } else {
                    bee.request({
                        url: '/Member/Index/collection',
                        data: {
                            type: 2,
                            housing_id: bee.getQueryString('id'),
                        },
                        success: function(result) {
                            dom.removeClass('icon-star-red').addClass('icon-star-red-blank');
                        }
                    });
                }
            });

            $('body').on('click', '.close', function() {
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.pay', function() {
                var housing_id = $('.list-item.yellow').attr('data-id');
                if (housing_id === undefined) {
                    alert('请选择房间');
                    return;
                }
                for (var i = 0; list[i]; i++) {
                    if (list[i].id = housing_id) {
                        bee.template('profit', list[i], true);
                        $('.dialog').dialog('show');
                        break;
                    }
                }
            });

            $('body').on('click', '.focus', function() {
                var id = $(this).attr('data-id');
                bee.request({
                    url: '/Member/Index/follow',
                    data: {
                        type: 1,
                        neighbourhoods_id: id,
                    },
                    success: function(result) {}
                });
            });

            bee.request({
                url: '/Index/Index/housing_view',
                data: {
                    id: bee.getQueryString('id'),
                },
                success: function(result) {
                    //添加点标记，并使用自己的icon
                    new AMap.Marker({
                        map: map,
                        position: [result.info.lng, result.info.lat],
                        icon: new AMap.Icon({
                            size: new AMap.Size(24, 24), //图标大小
                            image: "image/icon.png",
                            imageSize: new AMap.Size(175, 224),
                            imageOffset: new AMap.Pixel(-10, -130)
                        })
                    });

                    bee.template('slider', result.info, true);
                    bee.template('slider-label', result.info, true);
                    bee.template('base', result.info, true);
                    bee.template('nav-bar', result.info, true);
                    $('.card-body-title').text(result.info.title);
                    $('.month-fee').text('￥' + result.info.money + ' / 月 ');
                    $('#phone').attr('href', 'tel:' + result.info.mobile);
                    $('.title-bar-title').text(result.info.neighbourhoods_name);
                    $('.focus').attr('data-id', result.info.neighbourhood);
                    $('.title-bar-subtitle').text(result.info.neighbourhoods_addr);
                    if (result.info.is_collertion) {
                        $('.favorite .icon').removeClass('icon-star-red-blank').addClass('icon-star-red');
                    }
                    $('.body-text .convient-body:eq(0)').text(result.info.periphery.join('、'));
                    $('.body-text .convient-body:eq(1)').text(result.info.metro);
                    $('.body-text .convient-body:eq(2)').text(result.info.transit);
                    swiper();

                    bee.wxConfig(function() {
                        bee.hideAllNonBaseMenuItem();
                        bee.showMenuItems();
                        bee.wxMenuShareTimeline(result.info.title, bee.link.weixin + '/around.html?user_id=' + bee.cache('user_id') + '&id=' + result.info.id, function() {

                        }, function() {

                        });
                        bee.wxMenuShareAppMessage(result.info.title, result.info.neighbourhoods_addr, bee.link.weixin + '/around.html?user_id=' + bee.cache('user_id') + '&id=' + result.info.id, function() {

                        }, function() {

                        });
                    }, function(res) {});
                    bee.share();

                    $('body').on('click', '.bs', function() {
                        $('.share-modal').show();
                    });

                    $('body').on('click', '.slider-label a[data-index]', function(e) {
                        var width = $('body').width();
                        var size = $('.slider-container .slider-box img').length;
                        n = $('.slider-box span[data-index="' + $(this).attr('data-index') + '"]:first img').index('.slider-box img') + 1;
                        $('.slider-label a[data-index]').removeClass('active');
                        $(this).addClass('active');
                        $('.slider-container .pagination').text(n + ' / ' + size);
                        $('.slider-container .slider-box').css({
                            'margin-left': -(n - 1) * width
                        });
                    });
                }
            });

            function swiper() {
                var width = $('body').width();
                var size = $('.slider-container .slider-box img').length;
                $('.slider-container .slider-box').width(width * size);
                $('.slider-container .slider-box img').width(width);
                $('.slider-container .pagination').text(n + ' / ' + size);

                var startPos = 0;
                $('body').on('touchstart', '.sc', function(e) {
                    startPos = e.touches[0].pageX;
                });

                $('body').on('touchend', '.sc', function(e) {
                    var endPos = e.changedTouches[0].pageX;
                    if (Math.abs(startPos - endPos) < 10) {
                        return;
                    }
                    var left = $('.slider-container .slider-box').offset().left;
                    if (startPos > endPos) {
                        if (n > size - 1) {
                            return;
                        }
                        var index = $('.slider-box img').eq(n).parent().attr('data-index');
                        $('.slider-label a[data-index]').removeClass('active');
                        $('.slider-label a[data-index="' + index + '"]').addClass('active');
                        $('.slider-container .pagination').text((++n) + ' / ' + size);
                        $('.slider-container .slider-box').animate({
                            'margin-left': left - width
                        }, 500);
                    } else {
                        if (n < 2) {
                            return;
                        }
                        var index = $('.slider-box img').eq(n - 2).parent().attr('data-index');
                        $('.slider-label a[data-index]').removeClass('active');
                        $('.slider-label a[data-index="' + index + '"]').addClass('active');
                        $('.slider-container .pagination').text((--n) + ' / ' + size);
                        $('.slider-container .slider-box').animate({
                            'margin-left': left + width
                        }, 500);
                    }
                });
            }
        });
    </script>
    <div class="dialog">
        <div class="dialog-title">房租年付更优惠</div>
        <div class="dialog-body">
            <table>
                <thead>
                    <tr class="even">
                        <th>方式</th>
                        <th>租金（元/月）</th>
                        <th>押金（元）</th>
                        <th>总计（元/年）</th>
                    </tr>
                </thead>
                <tbody id="profit-dom">

                </tbody>
                <script id="profit" type="text/html">
                    <tr>
                        <td>月付</td>
                        <td>&yen;{{ month_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(month_pay) }}</td>
                    </tr>
                    <tr class="even">
                        <td>季付</td>
                        <td>&yen;{{ season_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(season_pay) }}</td>
                    </tr>
                    <tr>
                        <td>年付</td>
                        <td>&yen;{{ year_pay }}</td>
                        <td>&yen;{{ deposit_money }}</td>
                        <td>&yen;{{ total(year_pay) }}</td>
                    </tr>
                </script>
            </table>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-blue close">关闭</a>
        </div>
    </div>
</body>

</html>
